<template>
    <div class="Bcard" :style="BcardS">
        <div class="title">
            <i class="iconfont iconzuojiantou" @click="goBack"></i>
            <span>绑定银行卡</span>
            <i class="iconfont iconzuojiantou" style="color: rgba(0,0,0,0);"></i>
        </div>
        <div class="Bcard-identity">
            <p class="identity-tite">请输入您的身份信息</p>
            <div class="identity-center">
                <p>
                    <span>真实姓名</span>
                    <input type="text" placeholder="持卡人姓名" v-model="cardName">
                    <img src="../assets/invite/BcardImge.png" alt="" @click="Bcardshow">
                </p>
                <p>
                    <span>身份证号码</span>
                    <input type="text" maxlength="18" placeholder="持卡人本人身份证号码" v-model="IDCard">
                </p>
            </div>
            <p class="identity-tite">请输入您的银行卡信息</p>
            <div class="card-center">
                <p>
                    <span>银行卡号</span>
                    <input type="text" placeholder="持卡人本人银行卡号" v-model="cardNumber">
                </p>
               <div class="bankInfo" @click="getMoreBank">
                   <div class="left">
                         <img :src="imgLogo" alt=""  v-if="imgLogo">
                       <img src="../assets/realname/img4.png" alt="" v-else>
                   
                     <span>{{bangCardName==""?"请选择银行卡":bangCardName}}</span>
                   </div>
                   <div class="right">
                       <i class="iconfont iconzuojiantou1"></i>
                   </div>
               </div>
                 <p>
                    <span>手机号码</span>
                    <input type="tel" maxlength="11" placeholder="绑定银行卡手机号码" v-model="phoneNumber">
                </p>
                 <p>
                    <span>短信验证</span>
                    <input type="text" placeholder="请输入短信验证码" v-model="msgCode">
                    <button @click="getCode" v-show="showCode">{{codeText}}</button>
                     <button v-show="!showCode">{{codeNum}}s重新获取</button>
                </p>
            </div>
            <div class="card-confirm">
                <button @click="confirmBtn">确定绑定</button>
            </div>
        </div>
        
        <div class="BcardDialogBox" v-show="BcardBOX">
            <div class="Dialog-center">
                <p>持卡人说明</p>
                <p>为了资金安全，一个村村通账号，只能添加同一身份下的银行卡。</p>
                <p @click="Bcardclose">我知道了</p>
            </div>
        </div>
        <!-- 弹窗 -->
       <div class="ModelBox" v-show="showModel">
           
            <ul>
                <li class="close">
                     <i class="iconfont iconshanchuguanbicha" @click="closeModelBox"></i>
                </li>
                 <li v-for="(item,index) in bankList" :key="index" @click="getBankId(item.cardId,item.cardLogo,item.cardName)">
                    <img :src="item.cardLogo" alt="">
                     <span>{{item.cardName}}</span>
                </li>
            </ul>
       </div>
        
    </div>
</template>
<script>
import { Toast } from 'vant';
export default {
    data() {
        return {
            BcardBOX:false,
            BcardS:{
                height: "100vh",
                // backgroundSize: "100% 100vh",
            },
            BcardH:"",
            cardName:'',//真实姓名
            IDCard:'',//身份证号
            cardNumber:'',//银行卡号
            phoneNumber:'',//手机号码
            msgCode:'',//短信验证码
            bankName:"请选择银行卡",//银行名字,
            codeText:"获取验证码",
            showCode:true,
            codeNum:0,
            showModel:false, 
            bankList:[] ,
            bankCardId:'',//银行卡id
            imgLogo:'',
            bangCardName:""           
            
        }
    },
    mounted() {
        //监听手机屏幕的高度
        this.BcardH = window.screen.height 
        window.onresize = ()=>{ 
            var Height = document.documentElement.clientHeight || document.body.clientHeight
            var SS = Height*2/100
            if(SS < 9.6){
                var HH = String(this.BcardH*2/100);
                this.BcardS.height = HH+"rem";
            }
            else{
                this.BcardS.height = "100vh";
            }
        }  
    },
    methods: {
        goBack(){
            this.$router.push("/MywithdrawToSC")
        },
        Bcardshow(){
            this.BcardBOX = true;
        },
        Bcardclose(){
            this.BcardBOX = false;
        },
        //确定按钮
        confirmBtn (){
            var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
            var myreg=/^[1][3,4,5,7,8][0-9]{9}$/; 
            if(this.cardName==''){
                Toast("姓名不能为空");
                return  false;
            }else if(this.IDCard==''){
                 Toast("身份证号不能为空");
                 return  false;
            }
            else if(reg.test(this.IDCard) === false) {
                Toast("身份证号不合法")
                return  false;
            }
            else if(this.cardNumber==''){
                 Toast("银行卡号不能为空");
                 return  false;
            }
            else if(this.bangCardName==''){
                 Toast("请选择银行卡");
                     return false;
            }
            else if(this.phoneNumber==''){
                 Toast("手机号码不能为空");
                 return  false;
            }else if(!myreg.test(this.phoneNumber)){
                Toast("手机号码不合法");
                return false;
            }
            else if(this.msgCode==''){
                Toast("短信验证码不能为空");
                return  false;
            }else{
                var userId =JSON.parse(localStorage.getItem('key')).userId;
                var msgNum =Number(this.msgCode);
                 if(this.bangCardName=='请选择银行卡'){
                     Toast("请选择银行卡");
                     return false;
                 }

                this.$axios.post("/cct/account/add",{
                    accountType:this.bankCardId,
                    userId:userId,
                    bankCardName:this.bangCardName,
                    account:this.cardNumber,
                    accountName:this.cardName,
                    identityNumber:this.IDCard,
                    bindingPhoneNumber:this.phoneNumber,
                    verificationCode:msgNum
                }).then(res =>{
                    if(res.data.code==0){
                        Toast(res.data.msg);
                        this.$router.push("/MywithdrawToSC");

                    }else{
                        Toast(res.data.msg)
                    }
                })
            }
        },
        //获取验证码
        getCode (){
            if(this.phoneNumber==""){
                Toast("请输入手机号")
                return false;
            }
            this.$axios.post("/cct/account/verificationCode",{
                phoneNumber:this.phoneNumber
            }).then(res =>{
                console.log("获取验证码",res);
                if(res.data.code==0){
                    Toast(res.data.msg)
                    this.codeNum=60;
                    this.showCode=false;
                    var time =setInterval(()=>{
                        this.codeNum--;
                        if(this.codeNum==0){
                            clearInterval(time);
                            this.showCode=true;
                        }

                    },1000 )
                }
            })
        },
        //显示弹窗
        showToastModel (){
            this.showModel=true;
            this.getMoreBank();
           

        },
        //选择内容
         onSelect(item) {
            // 默认情况下点击选项时不会自动收起
            // 可以通过 close-on-click-action 属性开启自动收起
            this.show = false;
            Toast(item.name);
        },
        //获取更多银行
        getMoreBank (){
            this.showModel=true;
            this.$axios.post("/cct/card/appList",{}).then(res =>{
                console.log(res)
                if(res.data.code==0){
                    this.bankList =res.data.data;
                }
            })
        },
        //关闭弹窗
        closeModelBox(){
            this.showModel=false;
        },
        //选择银行
        getBankId(num,imgs,name){
            var userId =JSON.parse(localStorage.getItem('key')).userId;
            this.$axios.post("/cct/account/auditIsNotAccount",{
                accountType:num,
                userId
            }).then(res =>{
                console.log("查询是否绑定过银行卡",res);
                if(res.data.code==0){
                    Toast(res.data.msg)
                }else{
                     Toast(res.data.msg)
                }
            })
            this.bankCardId=num;
            this.imgLogo=imgs;
            this.bangCardName=name;
            this.showModel=false;
        }
    },
}
</script>
<style lang="less" scoped>
.Bcard{
    width: 100%;
    height: 100vh;
    font-size: 0;
    background: #FFFFFF;
    .title{
        width: 100%;
        font-size: 0.36rem;
        color:#333333;
        height: 1.2rem;
        line-height: 1.2rem;
        display: flex;
        justify-content: space-between;
        padding: 0 0.2rem;
        box-sizing: border-box;
        background: #FFFFFF
    }
    .Bcard-identity{
        width: 100%;
        height: 2.6rem;
        .identity-tite{
            width: 100%;
            height: 0.86rem;
            font-size: 0.24rem;
            font-family: "PingFang-SC-Medium";
            color: #666666;
            padding: 0rem 0.24rem;
            line-height: 0.86rem;
            background: #F8F8F8;
        }
        .identity-center{
            width: 100%;
            height: 1.74rem;
            padding: 0rem 0.24rem;
            // background: #FFFFFF;
            p{
                &:nth-child(1){
                    width: 100%;
                    height: 0.87rem;
                    line-height: 0.87rem;
                    border-bottom: 0.01rem solid #F8F8F8;
                    span{
                        font-size: 0.26rem;
                        font-family: "PingFang-SC-Medium";
                        color: #333333;
                        vertical-align:top;
                    }
                    input{
                        width: 4.5rem;
                        font-size: 0.26rem;
                        font-family: "PingFang-SC-Medium";
                        color: #999999;
                        margin-left: 0.96rem;
                    }
                    img{
                        width: 0.36rem;
                        height: 0.36rem;
                    }
                }
                &:nth-child(2){
                    width: 100%;
                    height: 0.87rem;
                    line-height: 0.87rem;
                    border-bottom: 0.01rem solid #F8F8F8;
                    span{
                        font-size: 0.26rem;
                        font-family: "PingFang-SC-Medium";
                        color: #333333;
                        vertical-align:top;
                    }
                    input{
                        width: 4.5rem;
                        font-size: 0.26rem;
                        font-family: "PingFang-SC-Medium";
                        color: #999999;
                        margin-left: 0.7rem;
                    }
                }
            }
           
        }
        .card-center{
            width: 100%;
            height: 5rem;
            padding: 0rem 0.24rem;
            p{
                &:nth-child(1){
                    width: 100%;
                    height: 0.87rem;
                    line-height: 0.87rem;
                    border-bottom: 0.01rem solid #F8F8F8;
                    span{
                        font-size: 0.26rem;
                        font-family: "PingFang-SC-Medium";
                        color: #333333;
                        vertical-align:top;
                    }
                    input{
                        width: 4.5rem;
                        font-size: 0.26rem;
                        font-family: "PingFang-SC-Medium";
                        color: #999999;
                        margin-left: 0.96rem;
                    }
                }
                &:nth-child(2){
                    width: 100%;
                    height: 0.87rem;
                    line-height: 0.87rem;
                    border-bottom: 0.01rem solid #F8F8F8;
                    span{
                        font-size: 0.26rem;
                        font-family: "PingFang-SC-Medium";
                        color: #333333;
                        vertical-align:top;
                    }
                    input{
                        width: 4.5rem;
                        font-size: 0.26rem;
                        font-family: "PingFang-SC-Medium";
                        color: #999999;
                        margin-left: 0.96rem;
                    }
                }
                &:nth-child(3){
                    width: 100%;
                    height: 0.87rem;
                    line-height: 0.87rem;
                    border-bottom: 0.01rem solid #F8F8F8;
                    span{
                        font-size: 0.26rem;
                        font-family: "PingFang-SC-Medium";
                        color: #333333;
                        vertical-align:top;
                    }
                    input{
                        width: 4.5rem;
                        font-size: 0.26rem;
                        font-family: "PingFang-SC-Medium";
                        color: #999999;
                        margin-left: 0.96rem;
                    }
                }
                &:nth-child(4){
                    width: 100%;
                    height: 0.87rem;
                    line-height: 0.87rem;
                    border-bottom: 0.01rem solid #F8F8F8;
                    span{
                        font-size: 0.26rem;
                        font-family: "PingFang-SC-Medium";
                        color: #333333;
                        vertical-align:top;
                    }
                    input{
                        width: 3rem;
                        font-size: 0.26rem;
                        font-family: "PingFang-SC-Medium";
                        color: #999999;
                        margin-left: 0.96rem;
                    }
                    button{
                        width: 1.78rem;
                        height: 0.56rem;
                        background: #38A83F;
                        border-radius: 0.28rem;
                        color: #FFFFFF;
                        font-size: 0.26rem;
                        line-height: 0.56rem;
                        text-align: center;
                    }
                }
            }   
             .bankInfo{
                width: 100%;
                padding: 0.1rem 0;
                box-sizing: border-box;
                font-size: 0.26rem;
                color:#333;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .left{
                    img{
                        width: 0.52rem;
                        height: 0.52rem;
                        margin-right: 0.15rem;
                    }
                }
                .right{
                    i{
                        font-size: 0.3rem;
                    }
                }
            }
        }
        .card-confirm{
            width: 100%;
            button{
                width: 4.9rem;
                height: 0.88rem;
                background: #38A83F;
                border-radius: 0.44rem;
                color: #FFFFFF;
                font-size: 0.34rem;
                margin-left: 1.3rem;
            }
        }
    }
    .BcardDialogBox{
        position: fixed;
        top: 0rem;
        left: 0rem;
        background: rgba(0,0,0,0.3);
        width: 100%;
        height: 100vh;
        .Dialog-center{
            width: 5.1rem;
            height: 3.15rem;
            background: #FFFFFF;
            margin: 3.3rem auto;
            border-radius: 0.1rem;
            padding: 0.3rem 0.33rem;
            p{
                &:nth-child(1){
                    width: 100%;
                    height: 0.4rem;
                    font-size: 0.34rem;
                    font-family: "PingFang-SC-Medium";
                    color: #333333;
                    font-weight: 530;
                    line-height: 0.4rem;
                    text-align: center;
                }
                &:nth-child(2){
                    width: 100%;
                    height: 1rem;
                    font-size: 0.26rem;
                    font-family: "PingFang-SC-Medium";
                    color: #666666;
                    font-weight: 500;
                    margin-top: 0.3rem;
                    line-height: 0.5rem;
                    // text-align: center;
                }
                &:nth-child(3){
                    width: 100%;
                    height: 0.4rem;
                    font-size: 0.26rem;
                    font-family: "PingFang-SC-Medium";
                    color: #38A83F;
                    font-weight: 500;
                    margin-top: 0.4rem;
                    line-height: 0.4rem;
                    text-align: center;
                }
            }
        }
    }
    // 弹窗
    .ModelBox{
        position: fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background-color: rgba(0,0,0,0.7);
       
        ul{
            background: #fff;
            width: 80%;
            padding: 0.3rem ;
            box-sizing: border-box;
            position: absolute;
            top:30%;
            left:0;
            right:0;
            bottom: 20%;
            border-radius: 0.15rem;
            margin:0 auto;
            overflow-y: scroll;
            .close{
                text-align: right;
            }
            li{
                font-size: 0.26rem;
                color:#666;
                margin-bottom: 0.2rem;
                img{
                    width: 0.52rem;
                    height:0.52rem;
                    margin-right:0.15rem;
                }
            }
        }
    }
}
</style>

